<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <div class="icon-list">
      <div v-for="(item, index) in predefineColors" :key="index" @click="selectedIcon(item)">
        <span style="display: inline-block;width: 30px;height: 30px;border-radius: 50%" :style="{background: item.split('-').length > 1 ? `linear-gradient(to right,${(item.split('-'))[0]} 0%,${(item.split('-'))[1]} 50%)` : item}" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VantIcon',
  props: {
    placeholder: {
      type: String,
      default: () => ''
    },
    predefineColors: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    selectedIcon(item) {
      this.$emit('selected', item)
      document.body.click()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
      min-height: 70px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: 20px;
        cursor: pointer;
        width: 10%;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
</style>
